<style scoped>
    .page-wrap {
        background: transparent !important;



    }
    .mall_banner{
        width:100%;
        height:2.2rem;
        position: relative;
        background: hsla(0,0%,100%,.1);
        overflow: hidden;
        display: -webkit-flex;
        flex-direction: column;
        -webkit-flex-direction: column;
        justify-content: space-between;
        -webkit-justify-content: space-between;
    }

    .mall_banner:after{
        content: '';
        position:absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(25,25,25,.3);
        z-index:-1;
    }

    .mall_banner_blur{
        position: absolute;
        width:100%;
        height: 100%;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        -webkit-filter: blur(0.1rem);
        -moz-filter: blur(0.1rem);
        -ms-filter: blur(0.1rem);
        z-index:-1;
    }

    .mall_banner .banner_t{
        width:calc(100% - 0.2rem);
        padding:0 0.1rem;
        height:0.39rem;
        display: -webkit-flex;
        flex-direction: row;
        -webkit-flex-direction: row;
        justify-content: space-between;
        -webkit-justify-content: space-between;
        align-items: center;
        -webkit-align-items: center;
        font-size:0.15rem;
        color: #ffffff;
    }

    .banner_t .start{
        font-size:0.15rem;
        color: #ffffff;
    }

    .mall_banner .banner_c{
        width:100%;
        text-align: center;
        flex-direction: column;
        -webkit-flex-direction: column;
        justify-content: center;
        -webkit-justify-content: center;
    }

    .mall_banner .banner_c .logo{
        display: inline-block;
        border:0;
        border-radius:100%;
        width:0.75rem;
        height:0.75rem;
        overflow: hidden;
    }

    .mall_banner .banner_c .logo img{
        width:100%;
        height:100%;
        -webkit-border-radius:50%;
        -moz-border-radius:50%;
        border-radius:50%;
        object-fit: cover;
    }

    .mall_banner .banner_c .nickname{
        color: #ffffff;
        font-size:0.13rem;
    }

    .mall_banner .banner_b{
        position: relative;
        width:100%;
        height:0.55rem;
        background: hsla(0,0%,100%,.1);
        overflow: hidden;
        display: -webkit-flex;
        flex-direction:row;
        -webkit-flex-direction:row;
        justify-content: center;
        -webkit-justify-content: center;
        align-items: center;
        -webkit-align-items: center;
    }

    .mall_banner .banner_b li{
        text-align: center;
        flex:1;

    }

    .mall_banner .banner_b li span{
        display: block;
        font-size:0.14rem;
        color: #ffffff;
        font-weight:500;

    }

    .mall_banner .banner_b li:nth-child(2){
        position: relative;
    }

    .mall_banner .banner_b li:nth-child(2):before{
        content: '';
        width:1px;
        height:0.18rem;
        background: #000;
        position: absolute;
        left:-1px;
        top:0;
        bottom:0;
        margin:auto;
    }

    .mall_banner .banner_b .b_border:after{
        content: '';
        width:1px;
        height:0.18rem;
        background: #000;
        position: absolute;
        right:-1px;
        top:0;
        bottom:0;
        margin:auto;
    }

    .mall_banner .banner_b:after{
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(25,25,25,.3);
        -webkit-filter: blur(0.04rem);
        -moz-filter: blur(0.04rem);
        -ms-filter: blur(0.04rem);
        z-index:-1;
        margin:-0.3rem;
    }

    .scoreItem{
        width:100%;
        height:0.35rem;
        background: #ffffff;
    }

    .scoreItem ul{
        display: -webkit-flex;
        flex-direction:row;
        -webkit-flex-direction:row;
        align-items: center;
        -webkit-align-items: center;
        border-bottom:1px solid #e6e6e6;
    }

    .scoreItem ul li{
        flex:1;
        text-align: center;
        font-family:'Microsoft YaHei UI';
    }

    .scoreItem ul li a{
        width:100%;
        height:0.4rem;
        display: inline-block;
        line-height: 0.4rem;
        color: #5e5e5e;
    }

    .scoreItem ul li a span{
        font-size:0.14rem;
    }

    .scoreItem ul li a i.ifont{
        font-size:0.21rem;
        color: #db3752;
        vertical-align: middle;
    }

    .scoreItem ul li:nth-child(2){
        position: relative;
    }

    .scoreItem ul li:nth-child(2):before {
        position: absolute;
        width: 1px;
        height: 0.18rem;
        background: #e6e6e6;
        content: '';
        left: -1px;
        top: 0;
        bottom: 0;
        margin: auto;
    }


    .scoreItem ul li:nth-child(2):after {
        position: absolute;
        width: 1px;
        height: 0.18rem;
        background: #e6e6e6;
        content: '';
        right: -1px;
        top: 0;
        bottom: 0;
        margin: auto;
    }

    .mall_main{
        width:100%;
        background: #ffffff;

    }

    .mall_main .scoreTitle{
        width:calc(100% - 0.2rem);
        margin:0 0.1rem;
        border-bottom:1px solid #dbdbdb;
        line-height:0.39rem;
        height:0.39rem;
    }

    .mall_main .scoreTitle i{
        vertical-align: middle;
        font-size:0.23rem;
        color: #db3752;

    }

    .mall_main .scoreTitle span{
        color: #5e5e5e;
        font-size:0.16rem;
    }

    .mall_main .mall_couponBox{
        width: calc(100% - 0.2rem);
        padding:0.1rem;

    }

    .mall_main .mall_couponBox .mall_coupon{
        position: relative;
        width:3rem;
        margin:0 auto;
        height: 1.15rem;
        border:1px solid #dbdbdb;
        margin-bottom:0.1rem;
    }

    .mall_main .mall_couponBox .mall_coupon .coupon_circle_l{
        width:0.08rem;
        height: 3rem;
        position: absolute;
        left:-0.04rem;
        top:0;
        background: transparent;
        overflow: hidden;
    }

    .mall_main .mall_couponBox .mall_coupon .coupon_circle_l span{
        display: block;
        width:0.07rem;
        height:0.07rem;
        -webkit-border-radius:50%;
        -moz-border-radius:50%;
        border-radius:50%;
        border-right:1px solid #dbdbdb;
        margin:0.05rem 0;
        background: #ffffff;
    }

    .mall_main .mall_couponBox .mall_coupon .coupon_circle_r{
        width:0.08rem;
        height: 3rem;
        position: absolute;
        right:-0.04rem;
        top:0;
        background: transparent;
        overflow: hidden;
    }

    .mall_main .mall_couponBox .mall_coupon .coupon_circle_r span{
        display: block;
        width:0.07rem;
        height:0.07rem;
        -webkit-border-radius:50%;
        -moz-border-radius:50%;
        border-radius:50%;
        border-left:1px solid #dbdbdb;
        margin:0.05rem 0;
        background: #ffffff;
    }

    .mall_main .mall_couponBox .mall_coupon .coupon_intro{
        display: inline-block;
        width:1.95rem;
        height:calc(100% - 0.2rem);
        margin:0.05rem 0.05rem 0.1rem 0.1rem;
        border-right:1px dashed #dbdbdb;
        position: relative;
    }

    .intro_circle_t{
        display: inline-block;
        position: absolute;
        width:0.07rem;
        height:0.07rem;
        -webkit-border-radius:50%;
        -moz-border-radius:50%;
        border-radius:50%;
        border-bottom:1px solid #dbdbdb;
        background: #ffffff;
        right:-0.04rem;
        top:-0.1rem;
    }

    .intro_circle_b{
        display: inline-block;
        position: absolute;
        width:0.07rem;
        height:0.07rem;
        -webkit-border-radius:50%;
        -moz-border-radius:50%;
        border-radius:50%;
        border-top:1px solid #dbdbdb;
        background: #ffffff;
        right:-0.04rem;
        bottom:-0.2rem;
    }

    .color5e{
        color: #5e5e5e !important;
    }

    .mall_main .mall_couponBox .mall_coupon .coupon_intro p{
        width:100%;
        height:0.25rem;
        line-height:0.25rem;
        font-size:0.13rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: #999999;

    }





    .mall_main .mall_couponBox .mall_coupon .coupon_intro .coupon_progress{
        width:1.9rem;
        height:0.03rem;
        -webkit-border-radius:0.15rem;
        -moz-border-radius:0.15rem;
        border-radius:0.15rem;
        background: #ffe6ea;
        overflow: hidden;
    }

    .mall_main .mall_couponBox .mall_coupon .coupon_intro .coupon_progress .inner{
        width:0;
        height:100%;
        background: #db3752;
    }

    .mall_main .mall_couponBox .mall_coupon .coupon_con{
        display: inline-block;
        vertical-align: top;
        width:0.71rem;
        height: calc(100% - 0.1rem);
        padding:0.06rem 0;
    }

    .mall_main .mall_couponBox .mall_coupon .coupon_con .imgBox{
        width:100%;
        height:0.45rem;
        margin-bottom:0.35rem;
    }

    .mall_main .mall_couponBox .mall_coupon .coupon_con .imgBox img{
        width: 100%;
        height:100%;
        object-fit: cover;
    }

    .mall_main .mall_couponBox .mall_coupon .coupon_con .invite_btn{
        display: inline-block;
        width:calc(100% - 0.02rem);

        -webkit-border-radius:0.15rem;
        -moz-border-radius:0.15rem;
        border-radius:0.15rem;
        border:1px solid #fba337;
        color: #fba337;
        background: #FFFFFF;
        line-height:0.2rem;
        text-align: center;
        font-size: 0.12rem;
        padding:0 0.02rem;
        margin-top:-0.05rem;
    }

    .mall_main .mall_couponBox .mall_coupon .coupon_con .forbbid_btn{
        display: inline-block;
        width:calc(100% - 0.02rem);
        -webkit-border-radius:0.15rem;
        -moz-border-radius:0.15rem;
        border-radius:0.15rem;
        border:1px solid #ccc;
        color: #ffffff;
        background: #666;
        line-height:0.2rem;
        text-align: center;
        font-size: 0.12rem;
        padding:0 0.02rem;
        margin-top:-0.05rem;
    }


    /*  mask  */
    .score_mask{
        width:100%;
        height:100%;
        position:fixed;
        left:0;
        top:0;
        background: rgba(0,0,0,.7);
        z-index:99;
    }

    .score_mask .score_popUp{
        position: absolute;
        left:50%;
        top:50%;
        -webkit-transform: translateX(-50%) translateY(-50%);
        -moz-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
        -o-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
        width:3rem;
        height:2.1rem;
        -webkit-border-radius:0.15rem;
        -moz-border-radius:0.15rem;
        border-radius:0.15rem;
        background: #ffffff;

    }

    .score_mask .score_popUp .popTitle{
        width:calc(100% - 0.2rem);
        padding:0 0.1rem;
        height:0.4rem;
        line-height:0.4rem;
        border-bottom:1px solid #ccc;

    }


    .score_mask .score_popUp .popMain{
        width:calc(100% - 0.2rem);
        padding:0.05rem 0.1rem;

    }

    .score_mask .score_popUp .popMain p{
        line-height:0.35rem;
    }

    .score_mask .score_popUp .popBottom{
        width:calc(100% - 0.2rem);
        padding:0 0.1rem;
        border-top:1px solid #ccc;
        height:0.6rem;
        line-height: 0.6rem;
        text-align: right;
    }

    .score_mask .score_popUp .popBottom button{
        display: inline-block;
        width:0.7rem;
        height:0.35rem;
        border-radius:0.1rem ;
        vertical-align: middle;
        margin:0 0.03rem;
    }

    .score_mask .score_popUp .popBottom button.sure{
        background: #018dcd;
        color: #ffffff;
    }

    .score_mask .score_popUp .popBottom button.cancle{
        background: #ccc;
        color: #999;
    }

    .rule_mask{
        width:100%;
        height:100%;
        position: fixed;
        left:0;
        top:0;
        z-index:99;
        background: rgba(0,0,0,.8);
    }

    .rule_mask .rule_popUp{
        font-family:"微锟斤拷锟脚猴拷", "Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif;
        position: absolute;
        left:50%;
        top:50%;
        -webkit-transform: translateX(-50%) translateY(-50%);
        -moz-transform: translateX(-50%) translateY(-50%);
        -ms-transform: translateX(-50%) translateY(-50%);
        -o-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
        width:3rem;
        height:2.1rem;
        -webkit-border-radius:0.15rem;
        -moz-border-radius:0.15rem;
        border-radius:0.15rem;
        background: #ffffff;
        overflow-y: scroll;
        border: 0.05rem solid #fff;
    }

    .rule_mask .rule_popUp p{
        width:calc(100% - 0.2rem);
        padding:0 0.1rem;
        line-height:0.25rem;
    }

    .rule_mask .rule_popUp .rule_detail{
        width:100%;

    }

    .rule_mask .rule_popUp .rule_detail li{
        width:100%;
        display: -webkit-flex;
        flex-direction: row;
        -webkit-flex-direction: row;
        justify-content: center;
        -webkit-justify-content: center;
        line-height:0.3rem;
        height:0.3rem;
    }

    .rule_mask .rule_popUp .rule_detail li span{
        flex:1;
        display:inline-block;
        text-align: center;
        letter-spacing: 0.02rem;


    }

    .rule_mask .rule_popUp .rule_detail li span i{
        color: #018dcd;
    }



</style>
<template>
    <div class="page-wrap">
        <header-component :page-name="pageName"></header-component>

        <section class="mall_banner">
            <div class="mall_banner_blur" :style="{background: 'url('+data.img+') 0 / cover'}"></div>
            <div class="banner_t">
                <div class="start"><i class="ifont">&#xe641;</i><span>连续签到第{{data.last_qiandao}}天</span></div>
                <div class="end" @click="toggleMask('rule')"><i class="ifont" >&#xe61f;</i><span>积分规则</span></div>
            </div>
            <div class="banner_c" >
                <div class="logo">
                    <img :src="data.img"/>
                </div>
                <p class="nickname">{{data.username}}</p>
            </div>
            <ul class="banner_b">
                <li>
                    <span>{{data.total_points}}</span>
                    <span>总积分</span>
                </li>
                <li class="b_border">
                    <span>{{data.surplus_points}}</span>
                    <span>可用积分</span>
                </li>
                <li>
                    <span>{{data.used_points}}</span>
                    <span>已用积分</span>
                </li>
            </ul>
        </section>

        <section class="scoreItem">
            <ul>
                <li>
                    <a href="javascript:;" v-link="{path:'/scoreItem',query:{uid:data.uid}}"><i class="ifont">&#xe63f;</i><span>积分明细</span></a>
                </li>
                <!--<li><a href="" ><i class="ifont">&#xe607;</i><span>兑换记录</span></a> </li>-->
                <li>
                    <a href="javascript:;" v-link="{path:'/score'}"><i class="ifont">&#xe608;</i><span>赚取积分</span></a>
                </li>
            </ul>
        </section>

        <section class="mall_main">
            <div class="scoreTitle"><i class="ifont">&#xe63d;</i>积分兑换</div>
            <div class="mall_couponBox">
                <div class="mall_coupon"  v-for="(key,item) in listData">
                    <div class="coupon_circle_l">
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                    <div class="coupon_circle_r">
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                    <div class="coupon_intro" >
                        <span class="intro_circle_t"></span>
                        <span class="intro_circle_b"></span>
                        <p class="color5e">{{item.product_title}}</p>
                        <p>每日限兑换{{item.max_exchange_num}}个拼宝币</p>
                        <p>需要{{item.integral}}积分</p>
                        <p>今日已兑{{item.exchange_percent}}%</p>
                        <div class="coupon_progress">
                            <div class="inner" :style="{ width: item.exchange_percent + '%' }"></div>
                        </div>
                    </div>
                    <div class="coupon_con">
                        <div class="imgBox"><img :src="item.product_image"></div>
                        <a class="forbbid_btn" v-if="item.exchange_percent == '100.00'">已兑完</a>
                        <a class="invite_btn"  v-if="item.exchange_percent != '100.00'" @click="toggleMask('score',key,item.ruleid,item.integral,item.rule_type,this.data.surplus_points,item.surplus_exchange_num)">立即兑换</a>
                    </div>
                </div>
            </div>
        </section>

    </div>

    <pop :status-pop="statusPop" :msg="msg">
        <a href="javascript:;" @click="statusPop=false">确定</a>
    </pop>

    <score-pop :score-data="scoreData" :score-mask="scoreMask" :input-num="inputNum">

    </score-pop>

    <div class="mask" @click="toggleMask('rule')" v-show="ruleMask">
        <div class="rule_mall background_12">
            <div class="pop_banner rule_banner"></div>
            <div class="pop_list">
                <p>用户连续签到，以10天为一个周期，获取积分规则如下</p>
                <ul @scroll.prevent>
                    <li><span>第<em>1</em>天</span><span><em>4</em>积分</span></li>
                    <li><span>第<em>2</em>天</span><span><em>6</em>积分</span></li>
                    <li><span>第<em>3</em>天</span><span><em>8</em>积分</span></li>
                    <li><span>第<em>4</em>天</span><span><em>10</em>积分</span></li>
                    <li><span>第<em>5</em>天</span><span><em>12</em>积分</span></li>
                    <li><span>第<em>6</em>天</span><span><em>14</em>积分</span></li>
                    <li><span>第<em>7</em>天</span><span><em>16</em>积分</span></li>
                    <li><span>第<em>8</em>天</span><span><em>18</em>积分</span></li>
                    <li><span>第<em>9</em>天</span><span><em>20</em>积分</span></li>
                    <li><span>第<em>10</em>天</span><span><em>22</em>积分</span></li>
                </ul>
            </div>
        </div>
    </div>

</template>

<script>
    import headerComponent from '../components/header'
    import pop from '../components/pop'
    import User from '../module/user'
    import Request from '../config/request'
//    import Config from '../config/config'
    import scorePop from '../components/scorePop'

    module.exports = {
        data() {
            return {
                pageName:'积分商城',
                data:{},    //用户数据
                listData:{},   //商品数据
                scoreData:{    // 商品id 单价 种类 剩余积分 剩余库存
                    id: null,
                    integral:'a',
                    rule_type:1,
                    surplus_points:'b',
                    surplus_exchange_num:'c'
                },
                inputNum:1,
                statusPop:false,
                msg:'',
                ruleMask: false,
                scoreMask: false
            }
        },

        created(){
            this.$dispatch('isLoading',true)
        },

        async ready(){
            if(!User.isLogin){
                this.$router.replace('/login');
                return false;
            }
            await this.getUser();
            await this.getExchangeRuleList();
            this.$dispatch('isLoading',false)
        },


        methods:{
            toggleMask(type,key,id,a,b,c,d){
                console.log(type + ' key:' + key);
                console.log(a , b, c , d);
                if( type == 'score') {
                    this.scoreMask == false ? this.scoreMask=true : this.scoreMask=false;
                    this.inputNum = 1;
                    this.scoreData = Object.assign({},this.scoreData,{id:id,integral:a,rule_type:b,surplus_points:c,surplus_exchange_num:d})
                }
                if( type == 'rule') {
                    (this.ruleMask == false) ? this.ruleMask=true : this.ruleMask=false;
                }
            },




            async getUser(){
                let res = await User.getUser();
                if(res.status == 200) {
                    this.data = Object.assign(res.data.item[0])
                }
            },

            async getExchangeRuleList(){
                let res = await Request.post(Config.apiDomain + '/integral/exchangeRuleList');
                console.log(res);
                if(res.status == 200){
                    this.listData = Object.assign(res.data)
                }else{
                    this.statusPop = true;
                    this.msg = res.msg
                }
            },

        },
        components:{
            headerComponent,
            pop,
            scorePop
        },
        transitions:{
            'mask':{
                enterClass:'zoomInLeft',
                leaveClass:'fadeOutUp'
            }
        },



        events:{
            closeScorePop(res){
                this.scoreMask = res
            },
            closestatusPop(res){
                this.statusPop = res.status
                this.msg = res.msg
            }
        }
    }
</script>

